<template>
  <div class="approve-form">
    <p class="approve-form-title">审批记录</p>
    <div class="block">
      <el-timeline>
        <el-timeline-item v-for="item in approve.list" placement="top">
          <el-card>
            <el-col class="avatar-approve" :span="3">
              <el-avatar
                shape="circle"
                :size="40"
                fit="cover"
                :style="'background:'"
                :src="imgs.img5"
              />
            </el-col>
            <el-col :span="16">
              <span>审批人:{{ item.name }}</span>

              <p>职位：{{ item.positionsName }}</p>
              <p>审批时间：{{ item.auditTime }}</p>
              <el-button
                v-if="((item.executed && !item.auditTime) ||(!item.approved&&item.executed) )&&(item.userName.indexOf(user.userId)!=-1)"
                @click="() => handleApprove(400)"
              >同意</el-button>
              <el-button
                v-if="((item.executed && !item.auditTime) ||(!item.approved&&item.executed))&&(item.userName.indexOf(user.userId)!=-1)"
                @click="() => handleApprove(300)"
              >拒绝</el-button>
              <!--审批通过 -->
              <p v-if="item.approved && item.auditTime && item.executed">
                通过原因：{{ item.comments }}
              </p>
              <!--审批拒绝 -->
              <p v-if="!item.approved && item.auditTime && item.executed">
                拒绝原因：{{ item.comments }}
              </p>
            </el-col>
            <!--审批通过 -->
            <el-col
              v-if="item.approved && item.auditTime && item.executed"
              :span="5"
            ><img
              :src="imgs.img3"
            ></el-col>
            <!--审批拒绝 -->
            <el-col
              v-if="item.executed && item.auditTime && !item.approved"
              :span="5"
            ><img
              :src="imgs.img4"
            ></el-col>
            <!--待审批-->
            <el-col
              v-if="(item.executed && !item.auditTime&&item.userName.indexOf(user.userId)==-1) || (!item.executed&&item.userName.indexOf(user.userId)==-1)"
              :span="5"
            ><img
              :src="imgs.img1"
            ></el-col>
            <!--待我审批-->
            <el-col
              v-if="(item.executed && !item.auditTime&&item.userName.indexOf(user.userId)!=-1) || (!item.executed&&item.userName.indexOf(user.userId)!=-1)"
              :span="5"
            ><img
              :src="imgs.img2"
            ></el-col>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-input
          v-model="textarea"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          :placeholder="state==300?'请输入拒绝原因':'请输入同意原因'"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="submitApprove"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import img1 from './1.png'
import img2 from './2.png'
import img3 from './3.png'
import img4 from './4.png'
import img5 from './person.png'
import { mapState, mapMutations } from 'vuex'
export default {
  props: ['dataKey', 'typeId'], // dataKey为单据状态，typeId为单据类型从而分发请求
  data() {
    return {
      data: '',
      state: '',
      imgs: {
        img1: img1,
        img2: img2,
        img3: img3,
        img4: img4,
        img5: img5
      },
      dialogVisible: false,
      textarea: ''
    }
  },
  mounted() {
    const { fullPath } = this.$route
    const billId = localStorage.getItem(fullPath)
    this.$store.dispatch('approve/setApproveList', billId)
  },
  computed: {
    ...mapState(['approve', 'user'])
  },
  methods: {
    handleClose(done) {
      this.dialogVisible = false
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});
    },
    handleApprove(state) {
      this.state = state
      this.dialogVisible = true
    },
    async submitApprove() {
      const { fullPath } = this.$route
      const billId = localStorage.getItem(fullPath)
      await this.$store.dispatch('approve/submitApproveInfo', {
        id: billId,
        approveStatus: this.state,
        remark: this.textarea,
        typeId: this.typeId
      })
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss">
.approve-form {
  background: #fff;
  .el-avatar {
    background: #fff;
  }
  .approve-form-title {
    padding: 20px;
  }
  .avatar-approve {
    padding-left: 0px !important;
  }
  p {
    border-bottom: 0px;
  }
  .el-timeline {
    margin: 10px 0;
  }
  .el-timeline-item__wrapper {
    top: -30px;
    padding: 10px 20px;
  }
  .el-step.is-vertical .el-step__line {
    top: 5px;
  }
  ul {
    padding-inline-start: 10px;
  }
}
</style>
